<%page expression_filter="h"/>
<%inherit file="/main.html" />
<%namespace name='static' file='/static_content.html'/>
<%!
from django.utils.translation import gettext as _

from openedx.core.djangolib.markup import HTML
from openedx.core.djangolib.js_utils import js_escaped_string

%>
<%def name="course_name()">
 <% return _("{course_number} Courseware").format(course_number=course.display_number_with_default) %>
</%def>
<%block name="bodyclass">view-in-course view-courseware courseware ${course.css_class or ''}</%block>
<%block name="title"><title>
    % if section_title:
${static.get_page_title_breadcrumbs(section_title, course_name())}
    % else:
${static.get_page_title_breadcrumbs(course_name())}
    %endif
</title></%block>

<%block name="header_extras">
% for template_name in ["image-modal"]:
<script type="text/template" id="${template_name}-tpl">
    <%static:include path="common/templates/${template_name}.underscore" />
</script>
% endfor
<%
  header_file = None
%>
</%block>

<%block name="headextra">
<%static:css group='style-course-vendor'/>
<%static:css group='style-course'/>
## Utility: Notes
% if edx_notes_enabled:
<%static:css group='style-student-notes'/>
% endif

<script type="text/javascript" src="${static.url('js/jquery.autocomplete.js')}" async></script>
<script type="text/javascript" src="${static.url('js/src/tooltip_manager.js')}" async></script>

<link href="${static.url('css/vendor/jquery.autocomplete.css')}" rel="preload" type="text/css" as="style">
  ${HTML(fragment.head_html())}

% if is_learning_mfe:
  ## If this chromeless view is in an iframe in the learning microfrontend app
  ## then add a base tag in the head (of the iframe document) to force links
  ## in this iframe to navigate the parent window.
  <base target="_parent">
%endif

## Expose the $$course_id variable for course-team-authored JS.
## We assign it in the <head> so that it will definitely be
## assigned before any in-XBlock JS is run.
<script type="text/javascript">
  var $$course_id = "${course.id | n, js_escaped_string}";
</script>

</%block>

<%block name="js_extra">
  <script type="text/javascript" src="${static.url('common/js/vendor/jquery.scrollTo.js')}" async></script>
  <script type="text/javascript" src="${static.url('js/vendor/flot/jquery.flot.js')}" async></script>

  <%static:js group='courseware'/>

  % if enable_mathjax:
    <%include file="/mathjax_include.html" args="disable_fast_preview=True"/>
  % endif
  % if staff_access:
  	<%include file="xqa_interface.html"/>
  % endif

${HTML(fragment.foot_html())}

</%block>

<%block name="body_extra"/>

<div class="course-wrapper chromeless">
  <section class="course-content" id="course-content"\
    % if enable_completion_on_view_service:
      data-enable-completion-on-view-service="true" \
    % else:
      data-enable-completion-on-view-service="false" \
    % endif
    style="display: block; width: auto; margin: 0;"
  >
      <main id="main" aria-label="Content">
        ${HTML(fragment.body_html())}
      </main>
  </section>
</div>
% if not is_learning_mfe:

  % if course.show_calculator or edx_notes_enabled:
    <nav class="nav-utilities ${"has-utility-calculator" if course.show_calculator else ""}" aria-label="${_('Course Utilities')}">
      ## Utility: Notes
      % if edx_notes_enabled:
        <%include file="/edxnotes/toggle_notes.html" args="course=course, block=block"/>
      % endif

      ## Utility: Calc
      % if course.show_calculator:
        <%include file="/calculator/toggle_calculator.html" />
      % endif
    </nav>
  % endif
% else:
  % if edx_notes_enabled:
    <%include file="/edxnotes/toggle_notes.html" args="course=course, block=block"/>
  % endif
% endif

% if is_learning_mfe:
<script type="text/javascript">
  (function() {
    // If this view is rendered in an iframe within the learning microfrontend app
    // it will report the height of its contents to the parent window when the
    // document loads, window resizes, or DOM mutates.
    if (window !== window.parent) {
      document.body.className += ' view-in-mfe';
      var lastHeight = window.offsetHeight;
      var lastWidth = window.offsetWidth;
      var contentElement = document.getElementById('content');

      function dispatchResizeMessage(event) {
        // Note: event is actually an Array of MutationRecord objects when fired from the MutationObserver
        var isLoadEvent = event.type === 'load';
        var newHeight = contentElement.offsetHeight;
        var newWidth = contentElement.offsetWidth;
        if (!isLoadEvent && newWidth === lastWidth && newHeight === lastHeight) {
            // Monitor when any anchor tag is clicked, it is checked to make sure
            // it is referencing an element's id or name (not an external website). If
            // the href attribute is an id or name, the page will scroll the id or name.
            $('a').on("click", function(event){
              if ($(this).attr('href')[0] === '#') {
                var targetId = $(this).attr('href');
                // Checks if the href attribute is auto scrolling video transcripts.
                // The scroll behavior for transcript scrolling requires the viewport
                // to stay in relatively the same position so viewing of the video
                // is not disrupted.
                if ($(this).attr('class') === 'transcript-start'||$(this).attr('class') === 'transcript-end') {
                  var target = $(targetId)[0];
                  event.preventDefault();
                  target.scrollIntoView({
                    block: 'nearest',
                  });
                  target.focus();
                } else {
                  var targetName = $(this).attr('href').slice(1);
                  // Checks if the target uses an id or name.
                  var target = $(targetId)[0] || document.getElementsByName(targetName)[0];
                  // The scroll behavior fro all other types of href's will scroll
                  // the target to the top of the page
                  if (target) {
                    event.preventDefault();
                    target.scrollIntoView({
                      block: 'start',
                    });
                    target.focus();
                  }
                }
              }
            })
          return;
        }
        // Monitor for messages and checks if the message contains an id. If
        // there is an id, then the location of the selected focus element
        // is sent through its offset attribute. The offset will allow the
        // page to scroll to the location of the focus element so that it is
        // at the top of the page. Unique ids and names are required for
        // proper scrolling.
        window.addEventListener('message', function (event) {
          if (event.data.hashName) {
            var targetId = event.data.hashName;
            var targetName = event.data.hashName.slice(1);
            // Checks if the target uses an id or name to focus and gets offset.
            var targetOffset = $(targetId).offset() || $(document.getElementsByName(targetName)[0]).offset();
            window.parent.postMessage({ 'offset': targetOffset.top }, document.referrer);
          }
        })

        window.parent.postMessage({
            type: 'plugin.resize',
            payload: {
              width: newWidth,
              height: newHeight,
            }
          }, document.referrer
        );

        lastHeight = newHeight;
        lastWidth = newWidth;

        // Within the learning microfrontend the iframe resizes to match the
        // height of this document and it should never scroll. It does scroll
        // ocassionally when javascript is used to focus elements on the page
        // before the parent iframe has been resized to match the content
        // height. This window.scrollTo is an attempt to keep the content at the
        // top of the page. See TNL-7094
        window.scrollTo(0, 0);
      }

      // Create an observer instance linked to the callback function
      const observer = new MutationObserver(dispatchResizeMessage);

      // Start observing the target node for configured mutations
      observer.observe(document.body, { attributes: true, childList: true, subtree: true });

      window.addEventListener('load', dispatchResizeMessage);

      const resizeObserver = new ResizeObserver(dispatchResizeMessage);
      resizeObserver.observe(document.body);
    }
  }());
</script>
% endif
